<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
  , initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      //创建组件
      class Demo extends React.Component {
        /*
        1.通过onXxx属性指定事件处理函数(注意大小写)
          a.react使用的是自定义(合成)事件，而不是使用的原生DOm事件
          b.react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
        2.通过event.target得到发生事件的DOM元素对象
        */

        //React.createRef调用后可以返回一个容器，该容器可以村春被ref所标识的节点，该容器是‘专人专用’
        myRef = React.createRef();
        myRef1 = React.createRef();

        //展示左侧输入框的内容
        showData = () => {
          alert("hhaha", this.myRef.current.value);
        };
        showData1 = (event) => {
          alert(event.target.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef}
                type="text"
                placeholder="点击按钮提示数据"
              />
              &nbsp;
              <button onClick={this.showData}>点我提示左侧数据</button>
              &nbsp;
              <input
                ref={this.myRef1}
                onBlur={this.showData1}
                type="text"
                placeholder="失去焦点提示数据"
              />
              &nbsp;
            </div>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
